<template>
  <div id="dataanslysis">
    <div class="title titone">直播数据</div>
    <div v-if="$store.state.userRoot[6][34].owner">
      <div class="popval box">
        <div class="numbox" v-if="!liveDataLoading">
          <p>
            {{ format_num(InfoData.liveSale) }}
            <span>本场销售额</span>
          </p>
          <p>
            {{ format_num(InfoData.liveVolume) }}
            <span>本场销量</span>
          </p>
          <p>
            {{ format_num(InfoData.livePro) }}
            <span>直播商品数</span>
          </p>
          <p>
            {{ format_num(InfoData.lookPeople) }}
            <span>累计观看人次</span>
          </p>
          <p>
            {{ format_num(InfoData.lookPeak) }}
            <span>观看人数峰值</span>
          </p>
          <p>
            {{ format_num(InfoData.avgonLinePeople) }}
            <span>平均在线人数</span>
          </p>
          <p>
            {{ format_num(InfoData.avgLookTime) }}
            <span>人均看播时长</span>
          </p>
          <p>
            {{ format_num(InfoData.avgLook) }}
            <span>UV价值</span>
          </p>
          <p>
            {{ format_num(InfoData.avgPrice) }}
            <span>客单价</span>
          </p>
          <!-- <p>{{ format_num(InfoData.favorite) }}<span>点赞数</span></p>
          <p>{{ InfoData.liveFanRate }}%<span>转粉率</span></p>
          <p class="mbfan">
            {{ format_num(InfoData.liveFanCount) }}<span>新增粉丝</span>
          </p>
          <p class="mbfans">
            {{ format_num(InfoData.fansClubPeopleNum)
                    }}<span>粉丝团新增人数</span>
          </p>-->
        </div>
        <div class="loading_box" v-else>
          <van-loading class="loading" type="spinner" :vertical="true" />
        </div>
      </div>
      <!-- <div class="cargodata box" v-if="1 > 2">
        <div class="title">带货数据</div>
        <div class="numbox">
          <p>
            {{ format_num(InfoData.liveSale) }}
            <span>本场销售额</span>
          </p>
          <p>
            {{ format_num(InfoData.liveVolume) }}
            <span>本场销量</span>
          </p>
          <p>
            {{ format_num(InfoData.livePro) }}
            <span>直播商品数</span>
          </p>
          <p>
            {{ format_num(InfoData.avgLook) }}
            <span>UV价值</span>
          </p>
          <p>
            {{ format_num(InfoData.avgPrice) }}
            <span>客单价</span>
          </p>
          <p>
            {{ format_num(InfoData.priceRange) }}
            <span>直播商品价格区间</span>
          </p>
        </div>
      </div> -->
      <!-- 交易指数 -->
      <div class="trade box">
        <div class="title">交易指数</div>
        <!-- <div class="addgoods">
          <div @click="checkedGoodsFn">
            <img src="@/assets/img/nochecked.png" v-if="num % 2 == 0" />
            <img src="@/assets/img/checked.png" v-if="num % 2 != 0" />添加商品
          </div>
        </div> -->
        <div class="charts_box">
          <TabsChart 
            :tabNames = "['直播销售额','直播销量']"
            :chartHeight = "'6.4667rem'"
            @removeTab = "removeTabDeal"
            @addTab = "addTabDeal"
            :loading="dealLoading"
            :isNodata="!dealLoading && !dealXAxis.length"
          >
            <TabDealIndexLineChart 
              :xData1="dealXAxis"
              :series1="dealSaleDataChart"
              :series2="dealSaleVolumeDataChart"
              :name1="'直播销售额'"
              :name2="'直播销量'"
            />
          </TabsChart>
        </div>
        <!-- <van-tabs v-model="activeName" title-class="tab-name" offset-top="0">
          <van-tab title="直播销售额" name="a1">
            <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
            <div style="height: 6.4667rem;" v-if="activeName == 'a1' && dealXAxis.length != 0">
              <liveLineChart
                :xData="dealXAxis"
                :xIcons="xIcons"
                :series1="dealSaleData"
                :isSetIcon="checkedGoods"
                :name1="name7"
                v-if="dealXAxis.length != 0"
              />
            </div>
            <div class="zanwu" v-else-if="!loading && dealXAxis.length == 0">
              <img src="@/assets/three/noData.png" />
              <p>暂无数据</p>
            </div>
          </van-tab>
          <van-tab title="直播销量" name="b1">
            <div
              style="height: 6.4667rem;"
              v-if="activeName == 'b1' && xData06.length != 0 && !loading"
            >
              <liveLineChart
                :xData="xData06"
                :xIcons="xIcons"
                :series1="dealSaleVolumeData"
                :isSetIcon="checkedGoods"
                :name1="name6"
                v-if="xData06.length != 0"
              />
            </div>
            <div class="zanwu" v-else-if="!loading && xData06.length == 0">
              <img src="@/assets/three/noData.png" />
              <p>暂无数据</p>
            </div>
          </van-tab>
        </van-tabs> -->
      </div>
      <!-- 观看指数 -->
      <div class="watch box">
        <div class="title">观看指数</div>
        <div class="charts_box">
          <TabsChart 
            :tabNames = "['实时在线人数','进场人数','离场人数']"
            :chartHeight = "'6.4667rem'"
            @removeTab = "removeTabWatch"
            @addTab = "addTabWatch"
            :loading="watchLoading"
            :isNodata="!watchLoading && !watchXAxis.length"
          >
            <TabWatchIndexLineChart 
              :xData1="watchXAxis"
              :series1="onlineDataChart"
              :series2="enterDataChart"
              :series3="departureDataChart"
              :name1="'实时在线人数'"
              :name2="'进场人数'"
              :name3="'离场人数'"
            />
          </TabsChart>
        </div>
      </div>
      <!-- 互动指数 -->
      <div class="interact box">
        <div class="title">互动指数</div>
        <div class="charts_box">
          <TabsChart 
            :tabNames = "['本场涨粉人数','粉丝团新增','点赞次数']"
            :chartHeight = "'6.4667rem'"
            @removeTab = "removeTabInteraction"
            @addTab = "addTabInteraction"
            :loading="interactionLoading"
            :isNodata="!interactionLoading && !interactionXAxis.length"
          >
            <TabInteractionIndexLineChart 
              :xData1="interactionXAxis"
              :series1="iAddFensDataChart"
              :series2="iAddClubDataChart"
              :series3="iLikerDataChart"
              :name1="'本场涨粉人数'"
              :name2="'粉丝团新增'"
              :name3="'点赞次数'"
            />
          </TabsChart>
        </div>
      </div>
      <!-- 直播转化漏斗 -->
      <div class="conversion_modules box" v-if="InfoData && pData">
        <div class="title">直播转化</div>
        <!-- 如果是带货直播间才展示漏斗 -->
        <div class="conversion_box" v-if="pData.isShop">
          <!-- 如果商品点击次数返回0则展示缺省图 -->
          <template v-if="InfoData.clickCount != '--'">
            <div class="cb_box">
              <div class="cb_item">
                <div class="progress_box"><i :style="{'width':'100%'}"></i></div>
                <div class="percentage_box"><i>{{InfoData.seeClickPerCent}}</i></div>
                <div class="conversion_text">累计观看人数{{format_num(InfoData.lookPeople)}}</div>
                <i class="arrow"></i>
              </div>
              <div class="cb_item">
                <div class="progress_box"><i :style="{'width':InfoData.seeClickPerCent}"></i></div>
                <div class="percentage_box"><i>{{InfoData.clickVolumePerCent}}</i></div>
                <div class="conversion_text">商品点击次数{{format_num(InfoData.clickCount)}}次</div>
                <i class="arrow a2"></i>
              </div>
              <div class="cb_item">
                <div class="progress_box"><i :style="{'width':InfoData.volumeSeePerCent}"></i></div>
                <div class="conversion_text">商品销量{{format_num(InfoData.liveVolume)}}</div>
              </div>
            </div>
            <p class="allPerCenter">整体转换率 {{InfoData.volumeSeePerCent}}</p>
          </template>
          <div class="zanwu" v-else>
            <img src="@/assets/three/noData.png" />
            <p>暂无数据</p>
          </div>
        </div>
        <div class="zanwu" v-else>
          <img src="@/assets/three/noData.png" />
          <p>本场直播间未带货</p>
        </div>
      </div>
    </div>
    <!-- <noPower v-else :bg="'https://sf6-ttcdn-tos.pstatp.com/img/temai/e2797a315ea86dd81f757246ad696efedbb5263dwww800-800~tplv-resize:200:0.jpeg'" /> -->
    <noPower :minLeve="$store.state.userRoot[6][34].ownerMinLevel" v-else />
    <div class="bott"></div>
  </div>
</template>

<script>
import liveLineChart from '@/component/liveLineChart.vue';
import TabDealIndexLineChart from './component/TabDealIndexLineChart.vue';  //交易指数折线图
import TabWatchIndexLineChart from './component/TabWatchIndexLineChart.vue';  //观看指数折线图
import TabInteractionIndexLineChart from './component/TabInteractionIndexLineChart.vue';  //观看指数折线图
import TabsChart from '@/component/TabsChart.vue';
export default {
  props: ['pData'],
  data() {
    return {
      InfoData: null, //人气数值+带货数据
      xIcons: [], //折线图icon
      xData00: [],
      /*-----观看指数相关属性*/ 
      onlineData:null, //  实时在线series
      enterData:null, // 进场series
      departureData:null, //离场series
      onlineDataChart:null, //  实时在线series - 传递给图表
      enterDataChart:null, // 进场series - 传递给图表
      departureDataChart:null, //离场series - 传递给图表
      watchXAxis: [], //X轴
      watchLoading:true,
      /*-----观看指数相关属性*/ 

      /*-----交易指数相关属性*/ 
      dealSaleData: null, //  直播销售额series
      dealSaleVolumeData: null, //  直播销量series
      dealSaleDataChart:null, //   销售额series - 传递给图表
      dealSaleVolumeDataChart:null, //  销量series - 传递给图表
      dealXAxis: [],  //X轴
      dealLoading:true,
      /*-----交易指数相关属性*/ 

      /*-----互动指数相关属性*/ 
      iAddFensData:null, //  本场涨粉人数series
      iAddClubData:null, // 粉丝团新增series
      iLikerData:null, //点赞次数series
      iAddFensDataChart:null, //  本场涨粉人数series - 传递给图表
      iAddClubDataChart:null, // 粉丝团新增series - 传递给图表
      iLikerDataChart:null, //点赞次数series - 传递给图表
      interactionXAxis: [], //X轴
      interactionLoading:true,
      /*-----互动指数相关属性*/ 

      activeName: 'a1',
      activeName2: 'a2',
      activeName3: 'c3',
      type: 6, //折线图-直播销量,
      name6: '直播销量',
      type7: 7, //折线图-直播销售额,
      name7: '直播销售额',
      type8: 8, //折线图-实时在线人数,
      name8: '实时在线人数',
      type0: 0, //折线图-实时进场人数,
      name0: '实时进场人数',
      type10: 10, //折线图-离场人数,
      name10: '离场人数',
      type1: 1, //折线图-点赞次数,
      name1: '点赞次数',
      type2: 2, //折线图-粉丝团新增,
      name2: '粉丝团新增',
      type3: 3, //折线图-本场涨粉人数,
      name3: '本场涨粉人数',
      loading: false,
      liveDataLoading:true,//直播数据loading
      checkedGoods: false, //是否选中添加商品
      num: 0,
      isshow: true
    };
  },
  components: { 
    liveLineChart,
    TabsChart,
    TabWatchIndexLineChart,
    TabDealIndexLineChart,
    TabInteractionIndexLineChart
  },
  computed: {},
  created() {
    if(this.$store.state.userRoot[6][34].owner){
      this.GetLiveInfoData();
      
      this.getIAddFensData();
      this.getIAddClubData();
      this.getILikerData();

      this.getDealSaleVolume();
      this.getDealSale();

      this.getWacthOnlineData();
      this.getWacthEnterData();
      this.getWacthDepartureData();
    }
  },
  watch: {},
  methods: {
    addTabInteraction(item){
      if(item.id == 0){ //本场涨粉人数series
        this.iAddFensDataChart = this.iAddFensData;
      }else if(item.id == 1){ //粉丝团新增series
        // console.log(this.iAddClubData);
        this.iAddClubDataChart = this.iAddClubData;
      }else if(item.id == 2){ //点赞次数series
        this.iLikerDataChart = this.iLikerData;
      }
    },
    removeTabInteraction(item){
      if(item.id == 0){ //本场涨粉人数series
        this.iAddFensDataChart = null;
      }else if(item.id == 1){ //粉丝团新增series
        this.iAddClubDataChart = null;
      }else if(item.id == 2){ //点赞次数series
        this.iLikerDataChart = null;
      }
    },
    addTabDeal(item){
      if(item.id == 0){ //直播销售额
        this.dealSaleDataChart = this.dealSaleData;
      }else if(item.id == 1){ //直播销量
        this.dealSaleVolumeDataChart = this.dealSaleVolumeData;
      }
    },
    removeTabDeal(item){
      if(item.id == 0){ //直播销售额
        this.dealSaleDataChart = null;
      }else if(item.id == 1){ //直播销量
        this.dealSaleVolumeDataChart = null;
      }
    },
    addTabWatch(item){ //观看指数选中tab
      if(item.id == 0){ //实时在线人数
        // this.getWacthOnlineData();
        this.onlineDataChart = this.onlineData;
      }else if(item.id == 1){ //进场人数
        this.enterDataChart = this.enterData;
      }else if(item.id == 2){ //离场人数
        this.departureDataChart = this.departureData;
      }
    },
    removeTabWatch(item){  //观看指数取消选中tab
      if(item.id == 0){ //实时在线人数
        // this.getWacthOnlineData();
        this.onlineDataChart = null;
      }else if(item.id == 1){ //进场人数
        this.enterDataChart = null;
      }else if(item.id == 2){ //离场人数
        this.departureDataChart = null;
      }
    },
    checkedGoodsFn() {
      this.checkedGoods = !this.checkedGoods;
      this.num++;
    },
    // 获取--人气数据+带货数据
    GetLiveInfoData() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('/api/live/GetLiveInfoData', {
            params: {
              roomId: this.$route.query.room_id
            }
          })
          .then(res => {
            resolve(res.data.code);
            if (res.data.code == 0) {
              this.liveDataLoading = false;
              this.InfoData = res.data.data;
            } else if (res.data.code == 1003) {
              this.isshow = false;
            }
          });
      });
    },
    /* 折线图 - 交易指数 -直播销量 */
    getDealSaleVolume() {
      let that = this;
      this.loading = true;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type,
            markType: 1
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            that.saleNumList = res.data.data;
            // if(res.data.data.markUnix){
            //   res.data.data.markUnix.forEach(element => {
            //     that.xIcons.push(that.timestamp(element, 'h:m:s'));
            //     return that.xIcons;
            //   });
            // }
            that.dealSaleVolumeData = res.data.data.trendData[0];
            that.finish01 = true;
          }
        });
    },
    /* 折线图- 交易指数 - 直播销售额*/
    getDealSale() {
      let that = this;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type7,
            markType: 1
          }
        })
        .then(res => {
          this.dealLoading = false;
          if (res.data.code == 0) {
            if(res.data.data.dataUnix){
              res.data.data.dataUnix.map(element => {
                that.dealXAxis.push(that.timestamp(element, 'h:m:s'));
              });
            }
            // if(res.data.data.markUnix){
            //   res.data.data.markUnix.forEach(element => {
            //     that.xIcons.push(that.timestamp(element, 'h:m:s'));
            //     return that.xIcons;
            //   });
            // }
            that.dealSaleData = res.data.data.trendData[0];
            this.dealSaleDataChart = that.dealSaleData;
          }
        });
    },
    /* 折线图-  观看指数-实时在线人数*/
    getWacthOnlineData() {
      let that = this;
      that.loading = true;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type8,
            markType: 1
          }
        })
        .then(res => {
          that.watchLoading = false;
          if (res.data.code == 0) {
            that.saleNumList = res.data.data;
            that.isFristPushX = false;
            if(res.data.data.dataUnix){
              res.data.data.dataUnix.map(element => {
                that.watchXAxis.push(that.timestamp(element, 'h:m:s'));
              });
            }
            // if(res.data.data.markUnix){
            //   res.data.data.markUnix.forEach(element => {
            //     that.xIcons.push(that.timestamp(element, 'h:m:s'));
            //     return that.xIcons;
            //   });
            // }
            that.onlineData = res.data.data.trendData[0];
            this.onlineDataChart = that.onlineData;
            that.finish01 = true;
          }
        });
    },
    /* 折线图-  观看指数-实时进场人数*/
    getWacthEnterData() {
      let that = this;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type0,
            markType: 1
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.saleNumList = res.data.data;
            this.xData00 = [];
            that.isFristPushX = false;
            if(res.data.data.dataUnix){
              res.data.data.dataUnix.map(element => {
                that.xData00.push(that.timestamp(element, 'h:m:s'));
              });
            }
            // if(res.data.data.markUnix){
            //   res.data.data.markUnix.forEach(element => {
            //     that.xIcons.push(that.timestamp(element, 'h:m:s'));
            //     return that.xIcons;
            //   });
            // }
            that.enterData = res.data.data.trendData[0];
            that.finish01 = true;
          }
        });
    },
    /*折线图 - 观看指数-离场人数*/ 
    getWacthDepartureData(){
      let that = this;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type10,
            markType: 1
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            // that.saleNumList = res.data.data;
            that.departureData = res.data.data.trendData[0];
          }
        });
    },
    /* 折线图- 点赞次数*/
    getILikerData() {
      let that = this;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type1,
            markType: 1
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            that.saleNumList = res.data.data;
            this.xData01 = [];
            that.isFristPushX = false;
            // if(res.data.data.dataUnix){
            //   res.data.data.dataUnix.map(element => {
            //     that.xData01.push(that.timestamp(element, 'h:m:s'));
            //   });
            // }
            that.iLikerData = res.data.data.trendData[0];
          }
        });
    },
    /* 折线图- 粉丝团新增*/
    getIAddClubData() {
      let that = this;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type2,
            markType: 1
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.saleNumList = res.data.data;
            that.isFristPushX = false;
            this.iAddClubData = res.data.data.trendData[0];
          }
        });
    },
    /* 折线图- 本场涨粉人数*/
    getIAddFensData() {
      let that = this;
      this.$axios
        .get('api/live/trend1', {
          params: {
            roomId: that.$route.query.room_id,
            type: this.type3,
            markType: 1
          }
        })
        .then(res => {
          this.interactionLoading = false;
          if (res.data.code == 0) {
            if(res.data.data.dataUnix){
              res.data.data.dataUnix.map(element => {
                that.interactionXAxis.push(that.timestamp(element, 'h:m:s'));
              });
            }
            // if(res.data.data.markUnix){
            //   res.data.data.markUnix.forEach(element => {
            //     that.xIcons.push(that.timestamp(element, 'h:m:s'));
            //     return that.xIcons;
            //   });
            // }
            that.iAddFensData = res.data.data.trendData[0];
            this.iAddFensDataChart = that.iAddFensData;
          }
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/common/common.styl';
// 直播转化
.charts_box{
  margin: rem(32) 0 0
}
.conversion_box{
  margin: rem(34) 0;
  .cb_box{
    position: relative;
    &:before{
      content: '';
      position: absolute;
      width:rem(5);
      height 99%;
      background-color: #f5f5f5;
      top: .5%;
      left:rem(287);
    }
  }
  .cb_item{
    position: relative;
    padding-left: rem(287);
    .arrow{
      position: absolute;
      display:block;
      right:0;
      top:rem(32);
      width:rem(43);
      height:rem(142);
      bgp('./../../../assets/img/conversion_arrow.png');
      &.a2{
        top:rem(50);
      }
    }
    .progress_box{
      position: relative;
      width: rem(347);
      height: rem(60);
      background-color: #f5f5f5;
      border-radius: rem(4);
      overflow: hidden;
      z-index: 1;
      i{
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        height: 100%;
        background-color: #fd7f2c;
      }
    }
    .percentage_box{
      position: relative;
      width: rem(347);
      height: rem(92);
      display:flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      i{
        display: inline-block;
        width: rem(135);
        height: rem(62);
        line-height: rem(62);
        font-size: rem(24);
        font-style: normal;
        color: #222;
        bgp('./../../../assets/img/conversion_numbg.png');
      }
    }
    .conversion_text{
      position: absolute;
      top:0;
      left:0;
      width:rem(271);
      height:rem(60);
      line-height:rem(60);
      text-align: center;
      font-size:rem(24);
      border:1px solid #e5e5e5;
      border-radius: rem(4);
      color: #555555;
      box-sizing: border-box;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .allPerCenter{
    margin-top:rem(30)
    padding-left: rem(240);
    text-align: center;
    font-size:rem(24);
    color:#222;
  }
}
.conversion_nodata{

}
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}
#dataanslysis {
  .box {
    width: 9.2rem;
    margin: 0 auto;
  }
  .titone {
    margin: 0.6933rem 0.4rem 0;
  }
  .title {
    font-size: 0.4rem;
    color: #222222;
    padding-left: 0.2rem;
    font-weight: 600;
    position: relative;
  }
  .title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 0.08rem;
    height: 0.3733rem;
    background-color: #fd7f2c;
    border-radius: 0.1333rem;
  }
  .popval {
    position: relative;
    padding: 0 0 0.2667rem 0;
    .numbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      padding-bottom: 0.76rem;
      p {
        width: 33.3%;
        font-size: 0.4533rem;
        color: #222222;
        text-align: center;
        font-family: Dinpro-medium;
        padding-top: 0.7733rem;
        span {
          display: block;
          font-size: 0.32rem;
          color: #888888;
          font-weight: 500;
          //   padding-top: 0.1rem;
          font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI,
            Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
        }
      }
    }
  }
  .cargodata {
    position: relative;
    padding: 0.6667rem 0;
    .numbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      p {
        width: 33.3%;
        font-size: 0.4533rem;
        color: #222222;
        text-align: center;
        font-family: Dinpro-medium;
        padding-top: 0.7733rem;
        span {
          display: block;
          font-size: 0.32rem;
          color: #888888;
          font-weight: 500;
          //   padding-top: 0.1rem;
        }
      }
    }
  }
  /* 交易指数 */
  .trade {
    position: relative;
    .addgoods {
      position: absolute;
      right: 0;
      top: 0.06rem;
      font-size: 0.3467rem;
      color: #555;
      img {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 0.0667rem;
        margin-right: 0.16rem;
        margin-top: -0.04rem;
      }
    }
  }
  /* 观看指数 */
  .watch {
    position: relative;
  }
  /* 互动指数 */
  .interact {
    position: relative;
  }
  //   暂无数据
  .zanwu {
    width: 5.3333rem;
    height: 4rem;
    margin: 0.8rem auto 0.2rem auto;
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      display: block;
    }
    p {
      font-size: 0.3467rem;
      line-height: 0.4rem;
      color: #888;
      text-align: center;
    }
  }
  .loading_box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.7467rem;
    .loading{
      height: initial;
    }
  }
}
</style>
